<template>
	<view>
		<view class="is-login"></view>
		<view class="from-view-pc">
			<view class="title-view">
				<view class="row">
					<view class="title-text">注册</view>
					<view class="title-desc">
						<view>NUOZHONG</view>
						<view style="margin-top: -2px;">Sign Up</view>
					</view>
				</view>
				<image src="/static/pc/logo-icon.png" class="logo-css"></image>
			</view>
			<view class="form-item">
				<view class="form-label">
					<view>手</view>
					<view>机</view>
					<view>号</view>
				</view>
				<view class="division"></view>
				<view class="form-content">
					<input type="number" v-model="value.phoneNumber" placeholder="请输入手机号" class="input-css"
						placeholder-class="plac-css" maxlength="11" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					<view>密</view>
					<view>码</view>
				</view>
				<view class="division"></view>
				<view class="form-content">
					<input password v-model="value.password" placeholder="请输入密码" class="input-css"
						placeholder-class="plac-css" maxlength="32" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					<view>确</view>
					<view>认</view>
					<view>密</view>
					<view>码</view>
				</view>
				<view class="division"></view>
				<view class="form-content">
					<input password v-model="value.confirmPassword" placeholder="请再次输入密码" class="input-css"
						placeholder-class="plac-css" maxlength="32" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					<view>顾</view>
					<view>问</view>
					<view>工</view>
					<view>号</view>
				</view>
				<view class="division"></view>
				<view class="form-content">
					<input v-model="value.advisoryNumber" placeholder="请输入顾问工号" class="input-css"
						placeholder-class="plac-css" maxlength="32" />
				</view>
			</view>
			<view class="form-item" style="padding: 10px 29px;padding-right: 10px;">
				<view class="form-label">
					<view>验</view>
					<view>证</view>
					<view>码</view>
				</view>
				<view class="division"></view>
				<view class="form-content">
					<input type="number" v-model="value.phoneCode" placeholder="请输入验证码" class="input-css"
						placeholder-class="plac-css" maxlength="6" />
					<view class="code-button" @click="getCode">{{codeTime != 60 ? codeTime + 's后重新获取' : '获取验证码'}}</view>
				</view>
			</view>
			<view style="height: 34px;"></view>
			<view class="button-view-pc button-primary" @click="onSubmit">注册</view>
			<view open-type="navigateBack" class="button-view-pc" @click="onNavigateBack">已有账号，立即登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: Object,
			codeTime: Number
		},
		data() {
			return {
				isRegister: false
			}
		},
		methods: {
			onSubmit() {
				this.$emit('submit')
			},
			getCode() {
				this.$emit('code')
			},
			onNavigateBack() {
				this.navigateBack('/pages/login/login')
			}
		}
	}
</script>

<style scoped lang="scss">
	.is-login {
		height: 96px;
	}

	.from-view-pc {
		width: 524px;
		padding: 37px 50px;
		background: #FFFFFF;
		margin-right: 192px;
		position: relative;
		z-index: 2;

		.title-view {
			width: 100%;
			margin-bottom: 38px;
			@extend .row-between;

			.title-text {
				font-weight: 600;
				font-size: 34px;
				color: #470300;
				margin-right: 6px;
			}

			.title-desc {
				font-size: 14px;
				color: #470300;
			}

			.logo-css {
				width: 152px;
				height: 30px;
			}
		}

		.form-item {
			width: 100%;
			padding: 18px 29px;
			background: #F6F6F6;
			border-radius: 31px;
			@extend .row-between;

			.form-label {
				width: 77px;
				@extend .row-between;
				font-size: 19px;
				color: #470300;
			}

			.division {
				width: 1px;
				height: 18px;
				background: #470300;
			}

			.form-content {
				width: calc(100% - 77px - 30px);
				@extend .row-between;

				.input-css {
					flex: 1;
					font-size: 19px;
				}

				.plac-css {
					font-size: 19px;
					color: #969595;
				}

				.code-button {
					padding: 10px 17px;
					font-size: 17px;
					color: #FF453B;
					border-radius: 22px;
					border: 1px solid #FF453B;
				}
			}
		}

		.form-item+.form-item {
			margin-top: 14px;
		}

		.button-view-pc {
			width: 100%;
			height: 62px;
			@extend .column;
			background: #FFFFFF;
			border-radius: 31px;
			border: 1px solid #FF453B;
			font-size: 22px;
			color: #FF453B;
		}

		.button-primary {
			background: #FF453B;
			color: white;
		}

		.button-text {
			height: initial;
			border: none;
			background: #FFFFFF;
		}

		.button-view-pc+.button-view-pc {
			margin-top: 14px;
		}

		.button-view-pc+.button-text {
			margin-top: 24px;
		}
	}
	
	@media only screen and (max-width: 908px) {
		.from-view-pc {
			margin-right: 0;
		}
	}
	
	@media only screen and (max-width: 584px) {
		.from-view-pc {
			width: calc(100vw - 60px);
		}
	}
</style>